<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>fetch api</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css">
    <style>
        .active, :focus {
            box-shadow: none !important;
        }
    </style>
</head>

<body>
<div class="container mt-2">
    <button class="btn fget btn-sm btn-primary">fetch get</button>
    <button class="btn fgetp btn-sm btn-info">fetch get param</button>
    <button class="btn fpost btn-sm btn-info">fetch post</button>
    <button class="btn fpostp btn-sm btn-success">fetch post param</button>
    <hr>
    <span id="tt"></span>
</div>

<script src="js/bootstrap/js/bootstrap.bundle.js"></script>
<script>

    document.querySelector('.fpostp').addEventListener('click', function () {
        fetch('http://localhost/api/t1', {
            method: 'post',
            //body: 'id=111&name=李强',
            body: JSON.stringify({code:222,msg:'信息上传',id:88,name:'周二'}),
            headers:{
                //'Content-Type':'application/x-www-form-urlencoded'//System.out.println(req.getParameter("name"))
                'Content-Type': 'application/json;charset=utf-8;'//System.out.println(req.getReader().readLine());
            }
        })
            .then(res => res.text())
            .then(res => {
                console.log(res)
            })
            .catch(e => {
                console.log(e)
            })
    })

    document.querySelector('.fpost').addEventListener('click', function () {
        fetch('http://localhost/api/t1', {method: 'post'})
            .then(res => res.text())
            .then(res => {
                console.log(res)
            })
            .catch(e => {
                console.log(e)
            })
    })

    document.querySelector('.fgetp').addEventListener('click', function () {
        fetch('http://localhost/api/t1?id=99&name=张三三', {method: 'get'})
            .then(res => res.text())
            .then(res => {
                console.log(res)
            })
            .catch(e => {
                console.log(e)
            })
    })


    document.querySelector('.fget').addEventListener('click', function () {
        fetch('http://localhost/api/t1')
            .then(res => res.text())
            .then(res => {
                console.log(res)
            })
            .catch(e => {
                console.log(e)
            })
    })

    let tt = document.querySelector('#tt')
    let ff = () => {
        fetch('http://localhost/api/t1')
            .then(res => res.text()) //res.text()  res.json()
            .then(res => {
                tt.innerHTML = res
            })
    }
    ff()
    //setInterval(ff, 1000)
</script>
</body>
</html>
